<template>
    <view class="container">
        <!-- 用药提醒列表区域 -->
        <view class="reminder-list">
            <view class="reminder-item" v-for="(combination, index) in groupList" :key="index"  >
                <view class="reminder-info">
                    <text class="reminder-time">{{ combination.categoryName }}</text>
                </view>
                <view class="reminder-detail">
                    <button class="delete-btn" size="mini" @click="goToDetail(combination.id,combination.categoryName)"  plain>详情</button>
                    <button class="detail-btn" size="mini" @click="goChooseTime(combination.id)" plain>选择</button>
                </view>
            </view>
        </view>
        <!-- 添加闹钟按钮 -->
        <button class="add-alarm-btn" @click="handleBottomButtonClick">添加新组合</button>
    </view>
</template>

<script>
import { useGroupStore } from '@/store/group'
import { useTimeStore } from '../../store/time';
const timeStore = useTimeStore()
const groupStore = useGroupStore()
  export default {
    setup(){
        return{
            groupStore,
            timeStore
        }
    },
    async onLoad() {
    await this.groupStore.getAllGroupById();
    console.log(this.groupStore.category);

    // 筛选出 category.categoryStatus === 0 的项
    this.groupList = this.groupStore.category.filter(item => item.categoryStatus === 0);
},
    data() {
      return {
        // 药品组合列表数据，这里可以根据实际情况从接口获取
        groupList: []
      };
    },
    methods: {
      goToDetail(id,categoryName) {
        uni.navigateTo({
          url:`/pages/group/groupDetail?id=${id}&categoryName=${categoryName}`
        })
      },
      goChooseTime(id){
        this.timeStore.categoryId = id
        uni.navigateTo({
          url:`/pages/reminder/timeList`
        })
      },
      // 新增的按钮点击事件处理函数
      handleBottomButtonClick() {
        console.log('底部按钮被点击了');
        wx.switchTab({
            url:'/pages/home/home'
        })
      }
    }
  };
</script>

<style lang="scss">
.container {
    padding: 20rpx;
    background-color: #f5f5f5;
    min-height: 100vh;
    position: relative; // 相对定位，用于子元素的绝对定位
}

// 用药提醒列表区域样式
.reminder-list {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    width: 100%; // 设置列表宽度为 100%
    box-sizing: border-box; // 确保宽度包含内边距和边框

    .reminder-item {
        display: flex;
        align-items: center;
        padding: 20rpx;
        border-bottom: 1rpx solid #f5f5f5;

        &:last-child {
            border-bottom: none;
        }

        .reminder-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .reminder-time {
                font-size: 28rpx;
                color: #333;
                margin-bottom: 16rpx;
            }

            .reminder-group {
                font-size: 24rpx;
                color: #666;
            }
        }

        .reminder-detail {
            .delete-btn{
                margin-right: 20rpx;

                color: #2ac2d1;
                border-color:#2ac2d1;
                &::after {
                    border-color: #2ac2d1;
                }
            }

            .detail-btn {
                font-size: 24rpx;
                color: #2ac2d1;
                border-color: #2ac2d1;

                &::after {
                    border-color: #2ac2d1;
                }
            }
        }
    }
}

// 添加闹钟按钮样式
.add-alarm-btn {
    position: fixed; // 固定定位
    bottom: 100rpx; // 距离底部 20rpx
    left: 50%; // 水平居中
    transform: translateX(-50%); // 水平居中偏移
    font-size: 28rpx;
    color: #fff;
    background-color: #2ac2d1;
    padding: 10rpx 20rpx;
    border-radius: 16rpx;
    width: calc(100% - 40rpx); // 减去容器的左右内边距
    box-sizing: border-box; // 确保宽度包含内边距和边框
}

// 编辑盒子样式
.edit-box {
    position: fixed;
    left: 0;
    width: 100%;
    height: 30%; // 设置盒子高度为屏幕高度的 80%
    background-color: #fff;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
    transition: bottom 0.3s ease;
    padding: 50rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .edit-box-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;

        .picker-row {
            display: flex;
            justify-content: space-around;
            width: 100%;

            .picker {
                width: 250rpx;
                margin-bottom: 30rpx;
                padding: 20rpx;
                border: 2rpx solid #ccc;
                border-radius: 20rpx;
                font-size: 30rpx;
                color: #333;
                background-color: #f9f9f9;
                box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.1);
                transition: all 0.3s ease;

                &:focus {
                    border-color: #2ac2d1;
                    box-shadow: 0 5rpx 10rpx rgba(42, 194, 209, 0.3);
                }

                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }

    .edit-box-footer {
        display: flex;
        justify-content: space-around;
        margin-top: 20rpx;

        .cancel-btn,
        .confirm-btn {
            width: 40%;
            font-size: 30rpx;
            padding: 15rpx;
            border-radius: 20rpx;
            border: none;
            box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .cancel-btn {
            background-color: #f0f0f0;
            color: #666;

            &:hover {
                background-color: #e0e0e0;
            }
        }

        .confirm-btn {
            background-color: #2ac2d1;
            color: #fff;

            &:hover {
                background-color: #22a3b0;
            }
        }
    }
}
</style>